<template>
	<view class="categoryContainer">
		 <!-- 头部搜索栏 -->
		<view class="header">
		  <view class="headerSearch">
			 <image class="schImg" src="../../static/search-icon.png"></image>
			 <input class="schIpt" type="text" placeholder="请搜索输入关键字"  >
		  </view>
		</view>  
	  <!-- 详细页 -->
		<view class="main" scroll-y="true" enable-flex>
			 <view class="leftView">
				   <view class="leftItem" :class="{active:currentIndex === index}"
						v-for="(c1,index) in categoryList" 
						:key="c1.classifyId" @click="currentIndex = index">
						  {{c1.classifyName}}
					 </view >
			 </view>
			<scroll-view scroll-y="true" enable-flex  class="rightView">
				<view class="rightheader">
					<image class="headerImg" v-for="(c2,index) in currentCategory.banner" :key="c2.url" :src="c2.image"></image>
				</view>
			 
			 <view class="rightCenter" v-for="(c3,index) in currentCategory.second" :key="c3.classifyId" >
				 <view class="rightTitle">{{c3.classifyName}}</view>
				 <view class="rightList"  >
					 <view class="rightItem" v-for="(c4,index) in c3.third" :key="c3.classifyId"  >
					  <image class="rightImg" :src="c4.image"></image>
					  <view class="rigthText">{{c4.classifyName}}</view>
					 </view>
					 
				 </view>
			 </view>
			</scroll-view>
			 
			 </view>
		</view>
	</view>
</template>

<script>
	import {mapState} from 'vuex'
	export default {
		name:'category',
		data(){
			return{
				currentIndex:0
			}
		},
		mounted(){
			this.getCategoryList()
		},
		methods:{
		  getCategoryList(){
		    this.$store.dispatch('category/getCategoryList')
		      }
		    },
				computed:{
				      ...mapState('category',['categoryList']),
				      currentCategory(){
				        return this.categoryList[this.currentIndex] || {}
				      }
				    }
	}
</script>

		
<style lang="stylus">
	.categoryContainer
		height: 100%
		.header
			border-bottom: 2upx solid #f5f5f5
		  .headerSearch
				display: flex
				align-items: center
				padding: 12upx 20upx
				border-radius:30upx
				margin: 18upx
				background-color:#f5f5f5
				.schImg
					width: 34upx
					height: 34upx
					margin-left: 2px
				.schIpt
					margin-left: 10px
					font-family:"Microsoft YaHei"
					font-size: 28upx
		.main
			display: flex
			.leftView
				width: 166upx
				padding: 2upx 
				margin-top: 50upx
				.leftItem
					height: 50upx
					line-height: 50upx
					text-align: center
					line-height: 50upx
					margin-bottom: 34upx
					font-size: 25upx
					color: #666666
					font-weight:600
					&.active
							background-color: hotpink
			.rightView
				width: 100%
				.rightheader
					width: 100%
					.headerImg
						width: 534upx
						height: 200upx
						margin: 36upx 20upx
						border-radius: 15upx
			  .rightTitle    
					width: 100%
					height: 114upx
					margin-left: 40upx
					font-size: 32upx
					font-weight: 700
					line-height: 114upx
				.rightList
					display: flex
					flex-wrap: wrap
					.rightItem
						width: 33.3333333%
						display: flex
						flex-direction: column
						align-items: center
						.rightImg
							width: 100%
							height: 171upx
						.rigthText
							font-size: 24upx
</style>
